<template>
  <views>
    <div class="agent_info_detail">
      <!-- 代理商信息 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1">
          <viewTitle :title="'基本信息'" :border="false"></viewTitle>
          <div class="basic_information">
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">代理商名称:</div>
                <div class="information_item_content">{{agent_name||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">统一信用代码:</div>
                <div class="information_item_content">{{enterprise_code||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">法人姓名:</div>
                <div class="information_item_content">{{legal_person||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">证件号码</div>
                <div class="information_item_content">{{certificate||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">联系人姓名</div>
                <div class="information_item_content">{{contact_name||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">联系人手机</div>
                <div class="information_item_content">{{contact_mobile||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">代理商类型</div>
                <div class="information_item_content">{{type||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">所属地区</div>
                <div class="information_item_content">{{province+'/'+city||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">所属客户经理</div>
                <div class="information_item_content">{{client_manager||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">协议附件</div>
                <div class="information_item_content">{{protocol_attach||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">上级代理商:</div>
                <div class="information_item_content">{{lead_agent||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">协议时间:</div>
                <div class="information_item_content">{{protocol_time||''}}</div>
              </div>
            </div>

            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">联系地址:</div>
                <div class="information_item_content">{{address||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title"></div>
                <div class="information_item_content"></div>
              </div>
            </div>

            <div class="flex basic_information_item_end flexR">
              <div class="flex">
                <div class="information_item_title">营业执照</div>
                <div class="information_item_content">
                  <el-image
                    style="width: 100%; height: 130px"
                    :src="business_licence_img"
                  ></el-image>
                </div>
              </div>
              <div class="flex">
                <div class="information_item_title">身份证</div>
                <div class="information_item_content">
                  <el-image
                    style="width: 100%; height: 130px"
                    :src="certificate_img"
                  ></el-image>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="账户信息" name="2">
          <viewTitle :title="'账户信息'" :border="false"></viewTitle>
          <div class="basic_information">
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">银行账号:</div>
                <div class="information_item_content">{{bank_code||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">开户银行:</div>
                <div class="information_item_content">{{bank_name||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">开户名称:</div>
                <div class="information_item_content">{{bank_account||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">预留手机号:</div>
                <div class="information_item_content">{{bank_mobile||''}}</div>
              </div>
            </div>
            <div class="flex basic_information_item flexR">
              <div class="flex">
                <div class="information_item_title">账户类型</div>
                <div class="information_item_content">{{bank_type||''}}</div>
              </div>
              <div class="flex">
                <div class="information_item_title">开户城市</div>
                <div class="information_item_content">{{bank_region||''}}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </views>
</template>


<script>
export default {
  data() {
    return {
      activeName: "1",
      srcList: [], //  营业执照 身份证
      //****************** 基本信息  ******************//
      agent_name:"",         // 代理商名称
      agent_sn:"",           // 代理商编号
      legal_person:"",       // 法人姓名
      contact_name:"",       // 联系人姓名
      type:"",               // 代理商类型
      client_manager:"",     // 所属客户经理
      lead_agent:"",         // 上级代理商
      address:"",            // 联系地址
      business_licence_img:"",// 营业执照
      enterprise_code:"",    // 统一信用代码
      certificate:"",        // 证件号码
      contact_mobile:"",     // 联系人手机
      province:"",           // 省
      city:"",               // 市
      protocol_attach:"",    // 协议附件
      protocol_time:"",      // 协议时间
      certificate_img:"",    // 身份证
      //****************** 基本信息  ******************//
      bank_code:"",          // 银行账号
      bank_name:"",          // 开户银行
      bank_account:"",       // 开户名称
      bank_mobile:"",        // 预留手机号
      bank_type:"",          // 账号类型
      bank_region:"",        // 开户城市


      

    };
  },
  methods: {
    handleClick() {},
    //   企业信息-【代理商账户信息】
    agent_bank() {
      let data = this.$api.sendSync(this.$mapapi.a_agent_bank, {});
      if (data.code != 200&&data.code!=501) {
        this.$message.error(data.msg);
        return;
      }
      this.bank_code=data.data.bank_code;          // 银行账号
      this.bank_name=data.data.bank_name;          // 开户银行
      this.bank_account=data.data.bank_account;    // 开户名称
      this.bank_mobile=data.data.bank_mobile;      // 预留手机号
      this.bank_type=data.data.bank_type;          // 账号类型
      this.bank_region=data.data.bank_region;      // 开户城市


    },
    //   企业信息-【代理商基本信息】
    agent_info() {
      let data = this.$api.sendSync(this.$mapapi.a_agent_info, {});
      if (data.code != 200&&data.code!=501) {
        this.$message.error(data.msg);
        return;
      }
      this.agent_name=data.data.agent_name;         // 代理商名称
      this.agent_sn=data.data.agent_sn;           // 代理商编号
      this.legal_person=data.data.legal_person;       // 法人姓名
      this.contact_name=data.data.contact_name;       // 联系人姓名
      this.type=data.data.type;               // 代理商类型
      this.client_manager=data.data.client_manager;     // 所属客户经理
      this.lead_agent=data.data.lead_agent;         // 上级代理商
      this.address=data.data.address;            // 联系地址
      this.business_licence_img=data.data.business_licence_img;// 营业执照
      this.enterprise_code=data.data.enterprise_code;    // 统一信用代码
      this.certificate=data.data.certificate;        // 证件号码
      this.contact_mobile=data.data.contact_mobile;     // 联系人手机
      this.province=data.data.province;           // 省
      this.city=data.data.city;               // 市
      this.protocol_attach=data.data.protocol_attach;    // 协议附件
      this.protocol_time=data.data.protocol_time;      // 协议时间
      this.certificate_img=data.data.certificate_img;    // 身份证
    },

  },
  created() {},
  mounted() {
         this.agent_info();
         this.agent_bank();
  }
};
</script>



<style lang="less" :scope="true" >
.agent_info_detail {
  background: #ffffff;
  border: 1px solid transparent;
  padding: 10px;
  .basic_information {
    padding: 0 10px;
    .basic_information_item_end {
      height: 130px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 130px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
    .basic_information_item {
      height: 55px;
      -moz-box-align: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -moz-box-pack: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      .information_item_title {
        width: 130px;
        text-align: left;
      }
      .information_item_content {
        width: 250px;
      }
    }
  }
}
</style>